<template>
	<!--  移动端 我的待付款/待发货/待收货/待评价 -->
	<view class="page">
		<view class="head-back">
			<view class="back" @click="onBack()">
				<text>&nbsp;</text>
			</view>
			<view class="title">
				<text>我的订单</text>
			</view>
			<view class="more-icon">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view>
		</view>
		<!-- 订单tab -->
		<view class="order-tab">
			<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
				<text>全部</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
				<text>待付款</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
				<text>待收货</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==4}" @click="onOrderTab(4)">
				<text>已取消订单</text>
				<text class="line"></text>
			</view>
			<!-- 未在需求中 -->
			<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
				<text>已完成</text>
				<text class="line"></text>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="list" v-for="item in goodsTbale" :key="item.goodsId"
				@click="()=>onOrderList(item.orderNo,item.codeName)">
				<view class="title-status">
					<view class="title">
						<text>{{item.orderTime}}</text>
					</view>
					<view class="status">
						<text>{{item.codeName}}</text>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods">
						<view class="thumb">
							<span v-for="(ite,index) in 2" :key="index">
								<image :src="ip+item.images[index]" mode=""></image>
							</span>
						</view>
						<view class="item">
							<view class="goods-name">
							</view>
							<view class="goods-price">
								<text class="min">￥</text>
								<text class="max">{{item.money}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="status-btn">
					<span v-if="item.codeName=='待付款'">
						<view class="btn" @click.stop="()=>cancelOrder(item.orderNo)">
							<text>取消订单</text>
						</view>
					</span>
					<span v-if="item.codeName=='已完成'">
						<view class="btn action" @click.stop="()=>onEvaluate(item.orderNo)">
							<text>评价</text>
						</view>
					</span>
					<span v-if="item.codeName=='待收货'">
						<view class="btn" @click.stop="()=>cancelOrder(item.orderNo)">
							<text>取消订单</text>
						</view>
					</span>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" message="成功消息" content="是否需要取消订单" :duration="2000" :before-close="true"
				@close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>

</template>

<script>
	import {
		baseUrl
	} from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				OrderType: 0,
				goodsTbale: [],
				show: false,
				list: [{
					type: 'error',
					icon: false,
					title: '失败主题',
					message: "请求失败",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				}],
				id:'',
				ip:"http://43.142.173.112:9090/images/",
			};
		},
		onLoad(params) {
			this.OrderType = params.type;
		},
		mounted() {
			// 根据跳转的
			this.onLook()
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			/**
			 * 返回点击
			 */
			onBack() {
				uni.redirectTo({
					url: '/pages/my/my',
				})
			},
			/**
			 * 订单tab点击
			 */
			onOrderTab(type) {
				this.OrderType = type;
				uni.request({
					url: baseUrl + "/userOrder/orderLookIsState",
					method: 'POST',
					data: {
						type: this.OrderType,
						userId: uni.getStorageSync("userId"),
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						this.goodsTbale = res.data.userOrderByState
					}
				})
			},
			onLook() {
				uni.request({
					url: baseUrl + "/userOrder/orderLookIsState",
					method: 'POST',
					data: {
						type: this.OrderType,
						userId: uni.getStorageSync("userId"),
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log(res)
						this.goodsTbale = res.data.userOrderByState
					}
				})
			},

			/**
			 * 订单列表点击
			 */
			onOrderList(item, codeName) {
				uni.navigateTo({
					url: '/pages/OrderDetails/OrderDetails?orderNo=' + item,
				})
			},


			onEvaluate(id) {
				uni.navigateTo({
					url: '/pages/MyEvaluatePush/MyEvaluatePush?orderNo=' + id
				})
			},
			close() {
						// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
						// ...
						this.$refs.popup.close()
					},
			confirm() {
				uni.request({
					url: baseUrl + "/userOrder/cancelOrder",
					method: 'POST',
					data: {
						orderNo: this.id,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data > 0) {
							uni.showToast({
								title: "取消成功",
								icon: "none"
							})
						} else {
							uni.showToast({
								title: "取消失败,请检查网络",
								icon: "none"
							})
						}
						this.onOrderTab(this.OrderType)
					}
				})
						this.$refs.popup.close()
					},
			cancelOrder(id) {
				this.id = id
				this.$refs.popup.open()
				
			}
		},
	}
</script>

<style scoped lang="scss">
	@import 'MyOrderList.scss';
</style>
